<!DOCTYPE html>
<html >

<body class="hold-transition skin-blue sidebar-mini">
	
    <!-- Main content -->
    <section class="content">
    	
		<!-- 角色信息 -->
		<div class="byking-panel" _table="roleMaintain" id="roleMaintain">

			<div>
				<div class="byking-panel-head" style="display: none">
					<div class="byking-panel-left">
						<i class="fa fa-cog"></i><font>操作台</font>
					</div>
					<div class="byking-panel-right">
						<label class="byking-company-label">yiz</label>
					</div>
				</div>
				
				<div class="byking-panel-head">
					<div class="byking-panel-left">
						<i class="fa fa-cog"></i><font>操作台</font>
					</div>
					<div class="byking-panel-right">
					<label class="byking-company-label" v-if="is_superadmin==0">{{top_dep_name}}</label>
					<button class="byking-company-button" @click="custom(index,'chooseCompany')" v-if="is_superadmin!=null && is_superadmin == 1">
						{{top_dep_name}}
						<i class="fa fa-chevron-down"></i>
					</button>
						
					</div>
				</div>
				
				<div class="button-panel">
					<div class="row">
						<div class="col-xs-4">
							<input type="text" v-model="key1"  placeholder="角色名称" class="form-control">
						</div>
						<div class="col-xs-4">
							<select name="status" lay-verify="required"  v-model="key2" class="byking-select">
								<option value="-1" selected>状态</option>
						        <option value="0">禁用</option>
						        <option value="1">启用</option>
							</select>
						</div>
						
						<div>
							<button @click="custom(index,'query')" 
								        class="btn btn-default fa fa-search-plus" 
								        data-toggle="tooltip" style="height:34px" 
								        data-original-title="查询">
							</button>
							<button @click="custom(index,'add')" style="height:34px" 
								        class="btn btn-default fa fa-plus" 
								        data-toggle="tooltip" 
								        data-original-title="新增" v-if="top_dep_guid">
							</button>
							
							<button @click="custom(index,'refreh')" style="height:34px" 
								        class="btn btn-default fa fa-rotate-right" 
								        data-toggle="tooltip" 
								        data-original-title="刷新">
							</button>
						</div>
					</div>
				</div>
			</div>
			
			<!-- 部门列表 -->
			<div class="byking-panel-content">
				<div class="byking-panel-head">
					<div class="byking-plane-left">
						<i class="fa fa-user"></i><font>角色信息</font>
					</div>
					
				</div>
				<table class="byking-table byking-table-bordered" v-if="total > 0">
					<thead  >
						<tr>
		    				<th>角色姓名</th>
		    				<th>角色信息</th>
		    				<th>状态</th>
		    				<th>所属组织</th>
		    				<th>创建时间</th>
		    				<th v-if="top_dep_guid">操作</th>
						</tr>
					</thead>
					<tbody>
		    			<tr v-for="(index,item) in page" class="byking-table-tr">
		    				<td>{{item.role_name}}</td>
		    				<td>{{item.role_info}}</td>
		    				<td v-if="item.status==1"><font color="red">禁用</font></td>
		    				<td v-if="item.status==0"><font color="green">启用</font></td>
		    				<td>{{item.top_dep_name}}</td>
		    				<td>{{item.create_time}}</td>
		    				
		    				<td v-if="top_dep_guid">
			    				<button @click="custom(index,'modify')" 
									        class="btn btn-default fa fa-pencil" 
									        data-toggle="tooltip" 
									        data-original-title="修改">
								</button>
								<button @click="custom(index,'delete')" 
									        class="btn btn-default fa fa-trash-o" 
									        data-toggle="tooltip" 
									        data-original-title="删除">
								</button>
								
								<button @click="custom(index,'showDetail')" 
									        class="btn btn-default fa fa-list" 
									        data-toggle="tooltip" 
									        data-original-title="显示详情">
								</button>

		    				</td>
		    			</tr>
	    			

					</tbody>
				</table>
				<div class="byking-foot-panel" v-if="total > 0">
					<div class="byking-foot-left">
						<label>每页显示</label>
						<select @change="setPageSize($event)">
							<option>10</option>
							<option>20</option>
							<option>50</option>
						</select>
						<label>条数据    共<font color="red">{{pages}}</font>页</label>
					</div>
					<div class="byking-panel-right">
						<!-- <div class="byking-page-buts"> -->
						<div class="btn-group byking-page-buts">
							<button :disabled="isFirstPage" @click="toFirst" class="btn btn-default"><i class="fa fa-fast-backward"></i></button>
							<button :disabled="isFirstPage" @click="backward" class="btn btn-default"><i class="fa fa-backward"></i></button>
							<label style="display:none">...</label>
							<button v-for="n in pages" :disabled="pageIndex==(n+1)" @click="selectPage(n+1)" class="btn btn-default">{{n+1}}</button>
							<button :disabled="isLastPage" @click="forward" class="btn btn-default"><i class="fa fa-forward"></i></button>
							<button :disabled="isLastPage" @click="toLast" class="btn btn-default"><i class="fa fa-fast-forward"></i></button>
						</div>
					</div>				
				</div>
				<div v-if="total == 0" class="byking-content-empty">
					<font>没有数据</font>
				</div>
			</div>
			<!-- ./部门列表 -->
			
		</div>
		<!-- ./角色信息 -->
		
		<!-- 角色菜单信息 -->
		<div class="byking-panel" style="display: none" _table="roleMenuRel" id="roleMenuRel">
			<div class="byking-panel-head">
				<div class="byking-panel-left">
					<i class="fa fa-edit"></i><font>菜单权限</font>
				</div>
				<div class="byking-panel-right">
					<div class="byking-buts">
						<button @click="custom(index,'showMenuTe')" 
						        class="btn btn-default fa fa-key" 
						        data-toggle="tooltip" 
						        data-original-title="菜单授权"></button>
					</div>
				</div>
			</div>
			
			<!-- 内容区域 -->
			<div v-if="total > 0">
				<table class="byking-table byking-table-bordered">
					<thead >
						<tr>
		    				<th>角色姓名</th>
		    				<th>菜单信息</th>
						</tr>
					</thead>
					<tbody>
						<tr v-for="(index,item) in page">
		    				<td>{{roleName}}</td>
		    				<td>{{item.menu_name}}</td>
		    			</tr>
					</tbody>
				</table>
				<div class="byking-foot-panel" >
					<div class="byking-foot-left">
						<label>每页显示</label>
						<select @change="setPageSize($event)">
							<option>10</option>
							<option>20</option>
							<option>50</option>
						</select>
						<label>条数据    共<font color="red">{{pages}}</font>页</label>
					</div>
					<div class="byking-panel-right">
						<div class="btn-group byking-page-buts">
							<button :disabled="isFirstPage" @click="toFirst" class="btn btn-default"><i class="fa fa-fast-backward"></i></button>
							<button :disabled="isFirstPage" @click="backward" class="btn btn-default"><i class="fa fa-backward"></i></button>
							<label style="display:none">...</label>
							<button v-for="n in pages" :disabled="pageIndex==(n+1)" @click="selectPage(n+1)" class="btn btn-default">{{n+1}}</button>
							<button :disabled="isLastPage" @click="forward" class="btn btn-default"><i class="fa fa-forward"></i></button>
							<button :disabled="isLastPage" @click="toLast" class="btn btn-default"><i class="fa fa-fast-forward"></i></button>
						</div>
					</div>				
				</div>
			</div>
			
			<div v-if="total == 0" class="byking-content-empty">
				<font>没有数据</font>
			</div>
			<!-- ./内容区域 -->
		</div>
		<!-- ./角色菜单信息 -->
		
		<!-- 角色部门信息 -->
		<div class="byking-panel" style="display: none" _table="roleDepRel" id="roleDepRel">
			<div class="byking-panel-head">
				<div class="byking-panel-left">
					<i class="fa fa-university"></i><font>所属部门</font>
				</div>
				<div class="byking-panel-right">
					<div class="byking-buts">
						<button @click="custom(index,'showDepTree')" 
						        class="btn btn-default fa fa-cogs" 
						        data-toggle="tooltip" 
						        data-original-title="归属部门"></button>
					</div>
				</div>
			</div>
			
			<!-- 内容区域 -->
			<div v-if="total > 0">
				<table class="byking-table byking-table-bordered">
					<thead >
						<tr>
		    				<th>角色姓名</th>
		    				<th>所属部门</th>
						</tr>
					</thead>
					<tbody>
						<tr v-for="(index,item) in page">
		    				<td>{{roleName}}</td>
		    				<td>{{item.name}}</td>
		    			</tr>
					</tbody>
				</table>
				<div class="byking-foot-panel" >
					<div class="byking-foot-left">
						<label>每页显示</label>
						<select @change="setPageSize($event)">
							<option>10</option>
							<option>20</option>
							<option>50</option>
						</select>
						<label>条数据    共<font color="red">{{pages}}</font>页</label>
					</div>
					<div class="byking-panel-right">
						<div class="btn-group byking-page-buts">
							<button :disabled="isFirstPage" @click="toFirst" class="btn btn-default"><i class="fa fa-fast-backward"></i></button>
							<button :disabled="isFirstPage" @click="backward" class="btn btn-default"><i class="fa fa-backward"></i></button>
							<label style="display:none">...</label>
							<button v-for="n in pages" :disabled="pageIndex==(n+1)" @click="selectPage(n+1)" class="btn btn-default">{{n+1}}</button>
							<button :disabled="isLastPage" @click="forward" class="btn btn-default"><i class="fa fa-forward"></i></button>
							<button :disabled="isLastPage" @click="toLast" class="btn btn-default"><i class="fa fa-fast-forward"></i></button>
						</div>
					</div>				
				</div>
			</div>
			
			<div v-if="total == 0" class="byking-content-empty">
				<font>没有数据</font>
			</div>
		</div>
		<!-- ./角色部门信息 -->
		
    </section>

	<script>
	
	/*

	 * 菜单操作

	 */	
	$tableData.addTable($hostconfig.sysAuthHost+"/role/menus", "#roleMenuRel", function(index, type, event){
		if (type === 'showMenuTe') {
			var vue = $tableData.getVue('#roleMenuRel');
			var title = "修改角色【" + vue.roleName + "】的菜单权限";
			var url = "authority/role/rolemeumrelation.html?roleId="+vue.roleId;
			var area = ["300px", "300px"];
			$byking.showModal(title,url,area);
		}
	}, false, false, true, 1, ["roleId","roleName"]);
	
	function refrehMenu(){
		$tableData.getVue("#roleMenuRel").resetUrl();
	}
	
	/*

	 * 部门操作

	 */
	$tableData.addTable($hostconfig.sysAuthHost+"/role/deps", "#roleDepRel", function(index, type, event){
		if (type === 'showDepTree') {
			var vue = $tableData.getVue('#roleDepRel');
			var title = "修改角色【" + vue.roleName + "】的归属部门";
			var top_dep_guid = $tableData.getVue("#roleMaintain").top_dep_guid;
			var url = "authority/role/roledepartmentrelation.html?roleId="+vue.roleId+"&top_dep_guid="+top_dep_guid;
			var area = ["300px", "300px"];
			$byking.showModal(title,url,area);
		}
	}, false, false, true, 1, ["roleId","roleName"]);
	
	function refrehDep(){
		$tableData.getVue("#roleDepRel").resetUrl();
	}
	
	$tableData.addTable($hostconfig.sysAuthHost+"/role/page", "#roleMaintain", function(index, type, event){
		if (type === 'add') {
			var vue = $tableData.getVue('#roleMaintain');
			var title = "新增角色";
			var url = "authority/role/addrole.html?top_dep_guid="+vue.top_dep_guid;
			var area = ["500px", "500px"];
			$byking.showModal(title,url,area);
		} else if (type === 'modify') {
			var content = this.page[index];
			var title = "修改【"+content.role_name+"】角色信息";
			var url = "authority/role/modifyrole.html?guid="+content.guid;
			var area = ["500px", "300px"];
			$byking.showModal(title,url,area);
		} else if (type == "delete") {
			var rowNum = index;
			var content = this.page[rowNum];
			var index = layer.confirm("确认删除记录？", {
				  btn: ["确认", "取消"] 
				}, function(index, layero){
					var url = $hostconfig.sysAuthHost+"/role/del?guid="+content.guid+"&user_guid="+$byking.getCookieValue("user_guid");
					$byking.getJSONWithToken(url,function(data){
						var vue = $tableData.getVue("#roleMaintain");
						var param = "&top_dep_guid="+vue.top_dep_guid;
						vue.setCon(param);
						layer.close(index);
					},function(data){
						layer.msg(data.responseJSON.message,{icon:5});
						layer.close(index);
					} );
				});
		
		} else if (type === "query") {
			var vue = $tableData.getVue('#roleMaintain');
			var param = "&role_name="+vue.key1;
			if(vue.key2!=-1){
				param += "&status="+vue.key2;
			}
			param += "&top_dep_guid="+vue.top_dep_guid;
			vue.setCon(param);
		} else if (type === "showDetail") {
			var content = this.page[index];
			var menu = $tableData.getVue('#roleMenuRel');
			menu.roleId = content.guid;
			menu.roleName = content.role_name;
			menu.setCon("&guid="+content.guid);
			$('#roleMenuRel').show();
			
			var dep = $tableData.getVue('#roleDepRel');
			dep.roleId = content.guid;
			dep.roleName = content.role_name;
			dep.setCon("&guid="+content.guid);
			$('#roleDepRel').show();
		} else if (type === "chooseCompany") {
			var title = "选择顶级组织";
			var url = "authority/role/choosecompany.html";
			var area = ["500px", "300px"];
			$byking.showModal(title,url,area);
		} else if (type === "refreh") {
			var vue = $tableData.getVue("#roleMaintain");
			var param = "&top_dep_guid="+vue.top_dep_guid;
			vue.setCon(param);
		}
	}, false, false, true, 1, ["key1","key2","top_dep_guid","top_dep_name","is_superadmin","is_admin"],true,"#roleMaintain");

	function initPage(){
		var is_superadmin = $byking.getCookieValue("is_superadmin");
		var vue = $tableData.getVue("#roleMaintain");
		vue.is_superadmin = is_superadmin;
		if(is_superadmin == 1){
			vue.top_dep_name = "全部组织";
			vue.refreh();
		} else {
			vue.top_dep_name = $byking.getCookieValue("top_dep_name");
			vue.top_dep_guid = $byking.getCookieValue("top_dep_guid");
			vue.is_admin = $byking.getCookieValue("is_admin");
			var param = "&top_dep_guid="+ $byking.getCookieValue("top_dep_guid") ;
			vue.setCon(param);
		}
	}
	
	initPage();
	
	function changeTopDep(item){
		$('#roleDepRel').hide();
		$('#roleMenuRel').hide();
		var vue = $tableData.getVue("#roleMaintain");
		vue.top_dep_name = item.name;
		vue.top_dep_guid = item.guid;
		var param = "&top_dep_guid=";
		if (item.guid){
			param += item.guid;
		} 
		vue.setCon(param);
	}
	
	function refrehRole(){
		var vue = $tableData.getVue("#roleMaintain");
		var param = "&top_dep_guid="+vue.top_dep_guid;
		vue.setCon(param);
	}
	</script>

</body>
</html>